<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <!-- vue-router依赖rvue，在vue下面引入 -->
    <script src="./js/vue-router.js"></script>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            border: 1px solid #000;
        }

        img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>你去死吧王珂庆</h1>
        <router-link to="/biaodan">账号名密码</router-link>
        <router-link to="/tupian">二维码图片</router-link>
        <router-view>
            <!-- //路由模板加载的位置 -->
        </router-view>
    </div>

    <template id="biaodan">
        <div>
            <h3>注册信息</h3>
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>重复密码</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;"><button>点击注册</button></td>
                </tr>
            </table>
        </div>
    </template>
    <template id="tupian">
        <div>
            <img src="./img/wc.jpg" alt="">
        </div>
    </template>
</body>
<script>
    //创建模板
    let biaodan = {
        template: "#biaodan"
    }
    let tupian = {
        template: "#tupian"
    }
    //创建路由器规则
    let routerObj = new VueRouter({
        routes: [
            { path: '/biaodan', component: biaodan },
            { path: '/tupian', component: tupian }
        ]
    })
    let vm = new Vue({
        el: "#app",
        //使用创建的规则
        router: routerObj
    })
</script>

</html>